<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14-vuex加减的例子-mapGetter的使用</title>
</head>
<body>
    <div id="app">
         <button @click="showStore">显示仓库数据</button>
         <h1>{{num}}</h1>
         <h1>{{totalPrice}}</h1>
         <button @click="add">加</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <!-- 1. 引入 vuex 依赖 -->
    <script src="./node_modules/vuex/dist/vuex.js"></script>
    <script>
        //创建仓库
        let store = new Vuex.Store({
            //仓库数据
            state:{
                num:999
            },
            getters:{
                totalPrice:function(state){
                       return state.num *10;
                }
            },
            //改变值的操作是同步的
            mutations:{
               increment:function(state){
                   state.num+=1;
               }
            }
        })
        let vm = new Vue({
            //配置仓库
            store,
            el:"#app",
            computed: {
                //mapGetters 用对象解构的方式来取值
              ...Vuex.mapGetters(["totalPrice"]),
              //mapState 用对象解构的方式来取值
             ...Vuex.mapState(["num"])
                
            },
            methods: {
                showStore:function(){
                    console.log(this.$store);
                },
                add:function(){
                    //提交 commit 修改数据
                   this.$store.commit("increment")
                }
            },
        })
    </script>
</body>
</html>